<template>
  <div class="container">
    <navBar :title="'我的待办'" :backStep="'index'"></navBar>
    <van-tabs v-model="active" color="#00B66E" @click="onClick">
      <van-tab title="待我整改">
        <div class="taskList">
          <div class="taskItem" v-for="item in problemList" :key="item.id">
            <div class="topItem">
              <div class="taskStatus" v-if="item.changeStatus == 1">
                {{ item.changeStatusName }}
              </div>
              <div class="taskStatus greenColor" v-if="item.changeStatus == 2">
                {{ item.changeStatusName }}
              </div>
              <div class="taskLeft">
                <img :src="item.dangerImg1" alt="" />
              </div>
              <div class="taskRight">
                <div class="taskTitle">{{ item.dangerName }}</div>
                <div class="taskSubTitle">
                  {{ item.dangerDescribe }}
                </div>
                <div class="taskLabel">
                  <div class="taskLabelItem">{{ item.dangerGradeName }}</div>
                  <div class="taskLabelItem">{{ item.governKindName }}</div>
                </div>
                <div class="taskDate">登记时间:{{ item.createdTime }}</div>
              </div>
            </div>
            <div class="bottomItem">
              <div class="statusBox" @click="goChange(item)">去整改</div>
            </div>
          </div>
          <div v-if="!problemList.length">
            <van-empty description="暂无整改任务" />
          </div>
        </div>
      </van-tab>
      <van-tab title="待我验收">
        <div class="taskList">
          <div class="taskItem" v-for="item in problemList" :key="item.id">
            <div class="topItem">
              <div class="taskStatus" v-if="item.changeStatus == 1">
                {{ item.checkResponerStatusName }}
              </div>
              <div class="taskStatus greenColor" v-if="item.changeStatus == 2">
                {{ item.checkResponerStatusName }}
              </div>
              <div class="taskLeft">
                <img :src="item.dangerImg1" alt="" />
              </div>
              <div class="taskRight">
                <div class="taskTitle">{{ item.dangerName }}</div>
                <div class="taskSubTitle">
                  {{ item.dangerDescribe }}
                </div>
                <div class="taskLabel">
                  <div class="taskLabelItem">{{ item.dangerGradeName }}</div>
                  <div class="taskLabelItem">{{ item.governKindName }}</div>
                </div>
                <div class="taskDate">登记时间:{{ item.createdTime }}</div>
              </div>
            </div>
            <div class="bottomItem">
              <div class="statusBox" @click="goChange(item)">去验收</div>
            </div>
          </div>
          <div v-if="!problemList.length">
            <van-empty description="暂无整验收任务" />
          </div>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import navBar from '@/components/navBar.vue'
import { toDoListApi } from '@/api/index'
export default {
  name: 'toDoList',
  props: {},
  components: { navBar },
  data() {
    return {
      active: 2,
      activeNum: 1,
      problemList: [],
    }
  },
  created() {
    this.getTodoList()
  },
  methods: {
    onClick(e) {
      this.activeNum = e == 0 ? 1 : 2
      this.getTodoList()
    },
    async getTodoList() {
      const res = await toDoListApi({
        id: JSON.parse(sessionStorage.getItem('loginInfo')).userId,
        changeOrResponer: this.activeNum,
      })
      this.problemList = res.data.data
    },
    goChange(item) {
      this.$router.push({
        path: '/problemDetailChange',
        query: {
          id: item.id,
        },
      })
    },
  },
  mounted() {},
  watch: {},
  computed: {},
  filters: {},
}
</script>

<style scoped lang="scss">
.container {
  height: 100%;
  width: 100%;
  background: #f7f7f7;
  box-sizing: border-box;
}
.taskList {
  padding: 0 15px;

  padding-top: 16px;
  padding-bottom: 50px;
  .taskItem {
    // height: 108px;
    background-color: #fff;
    border-radius: 8px;
    padding: 12px;
    position: relative;
    margin-bottom: 12px;
    .topItem {
      display: flex;
      align-items: center;
      .taskStatus {
        position: absolute;
        right: 0;
        top: 0;
        background-color: #00b9c7;
        width: 52px;
        height: 24px;
        line-height: 24px;
        text-align: center;
        color: #fff;
        border-radius: 0 8px 0 8px;
        font-size: 12px;
      }
      .taskLeft {
        img {
          width: 80px;
          height: 80px;
        }
      }
      .taskRight {
        margin-left: 10px;
        border-bottom: 1px solid #eef1f0;
        padding-bottom: 5px;
        .taskTitle {
          font-size: 14px;
          font-weight: bold;
          color: #3a3d3c;
        }
        .taskSubTitle {
          font-size: 10px;
          font-weight: bold;
          color: #616463;
          margin: 6px 0;
        }
        .taskLabel {
          display: flex;
          margin-bottom: 8px;
          .taskLabelItem {
            width: 48px;
            height: 20px;
            text-align: center;
            line-height: 20px;
            background-color: #f1f5f3;
            font-size: 10px;
            margin-right: 10px;
          }
        }
        .taskDate {
          font-size: 10px;
          font-weight: bold;
          color: #939c98;
        }
      }
    }
    .bottomItem {
      display: flex;
      justify-content: right;
      .statusBox {
        width: 60px;
        height: 28px;
        line-height: 28px;
        text-align: center;
        border-radius: 4px;
        border: 1px solid #d7dddb;
        font-size: 12px;
        margin-top: 12px;
      }
    }
  }
}
</style>
